<template>
  <div>
    <h1 class="title">WuShan酒店欢迎您</h1>
    <el-form
      :rules="Loginrules"
      ref="LoginForm"
      :model="LoginForm"
      class="loginContainer"
    >
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          auto-complete="false"
          v-model="LoginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          auto-complete="false"
          v-model="LoginForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" style="margin:0px 0px 20px 0px"
        >记住我</el-checkbox
      >
      <el-button type="primary" style="width: 100%" @click="submitLogin"
        >登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { login } from "../api/login";
export default {
  name: "Login",
  data() {
    return {
      LoginForm: {
        username: "admin",
        password: "123456"
      },
      checked: true,
      Loginrules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitLogin() {
      // this.$refs.LoginForm.validate(valid => {
      //   if (valid) {
      //     // alert("登录成功");
      //     window.location.href = "/Home";
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          let that = this;
          login(this.LoginForm)
            .then(resp => {
              console.log(resp);
              if (resp.data.code == "200") {
                that.$store.commit("setToken", resp.data.data.token);
                sessionStorage.setItem("token", resp.data.data.token);
                console.log(resp.data.data);
                that.$store.commit("setUserInfo", this.LoginForm.username);
                this.$message.success(resp.data);
                setTimeout(() => {
                  // 此时要判断/login后面的参数，若无参数，进入主页；
                  this.$router.push("/Home");
                  // 若有参数则参数为未有权限的那个路由，跳转到那个路由
                  // this.$router.push(***); -- 具体要自己在这实现
                }, 1000);
                // window.location.href = "/Home";
              } else {
                this.$message.error(resp.data);
              }
            })
            .catch(error => {
              // 错误分为 status-请求错误 和 code-账号密码错误
              this.$message.error(error);
              console.log(error);
            });
        }
      });
    }
  }
};
</script>
<style>
.title {
  text-align: center;
  font-size: 70px;
  font-weight: 80;
  font-family: "Microsoft YaHei";
}
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 140px auto;
  width: 350px;
  padding: 15px 35px 15px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
  text-align: center;
  margin: 10px auto 30px auto;
}
</style>
